<script setup lang="ts">

defineProps(["list"]);
const toChat = (id: number) => {
  uni.navigateTo({
    url: `/pages/index/index?id=${id}`
  });
};
</script>
<!-- :style="`background-image: url(${item.avatar_image})` -->
<template>
  <uv-empty
    v-if="!list.length"
    marginTop="25vh"
    mode="data"
    text="暂无数据"
    icon="https://lehuopai-1311286543.cos.ap-guangzhou.myqcloud.com/img/my/icon_empty.png"
    width="80"
    height="80"
    textColor="#999999"
  ></uv-empty>
  <view v-else class="ACard">
    <view
      v-for="(item, index) in list"
      :key="index"
      class="ACard-item"
      @click="toChat(item.id)"
    >
      <view class="card-img">
        <uv-image
          class="img"
          radius="10px"
          mode="widthFix"
          :src="item.avatar_image"
          width="100%"
          height="100%"
          customStyle="min-height: 140rpx;"
        ></uv-image>
        <view class="img_bt">
          <text class="img-t">{{ item?.message_total }}人在聊</text>
          <uv-image
            src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/shop/a_2.png"
            width="38px"
            height="38px"
            customStyle="position: absolute;bottom: -10px;right: -0px;"
          ></uv-image>
        </view>
      </view>

      <view class="ACard-text">
        <view class="d-flex">
          <view class="t1 font14333">{{ item?.nickname || "" }}</view>
          <view v-if="item?.tag?.name" class="t-wall">{{
            item?.tag?.name
          }}</view>
        </view>

        <view class="t2 font12999">{{ item?.opening_remarks || "" }}</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.ACard {
  padding: 0 20rpx 20rpx;
  display: flex;
  flex-flow: row wrap;

  .d-flex {
    padding: 12px 0 2px 0;
    align-items: center;
  }

  .t-wall {
    border-radius: 5px;
    background: #fdefec;
    color: #ff7c7c;
    text-align: center;
    margin-left: 10px;
    padding: 4px 6px;

    font-size: 24rpx;
  }

  .img {
    min-height: 300rpx;
  }

  :deep(.uv-image__loading) {
    min-height: 300rpx;
  }

  :deep(.uv-image__error) {
    min-height: 300rpx;
  }

  .card-img {
    position: relative;
  }

  .img_bt {
    background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/shop/a_1.png");
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 4px 0;
    background-size: 100% 100%;
    white-space: nowrap;
  }
  .img-t {
    white-space: nowrap;
  }

  .img-t {
    padding: 0 42px;
    color: #fff;
    font-size: 24rpx;
    line-height: 20px;
  }

  .ACard-item {
    padding: 10px;
    background: #fff;
    margin: 5px;
    border-radius: 10px;
    // background: linear-gradient(180deg, rgba(9, 16, 20, 0) 42.71%, #091014 100%);
    width: calc(50% - 10px - 20px);
    min-height: 282rpx;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
  }

  .ACard-text {
    .t1 {
      // line-height: 20px;
      // padding: 12px 0 2px 0;
    }

    .t2 {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 50rpx;
    }
  }
}
</style>
